<template>
  <div id="course-details">
    <div class="introductions">
      <div class="video">
        <video src="http://vjs.zencdn.net/v/oceans.mp4"></video>
        <div class="mask">
          <img src="../../../assets/img/button-play.png">
        </div>
      </div>
      <div class="info">
        <Button type="default"
                icon="ios-undo"
                @click="goBack">返回</Button>
        <div class="name">
          <span class="placeholder"></span>
          <span>{{list.courseName}}</span>

        </div>
        <div class="detail">
          <div>授课教师：{{list.teacherName}}</div>
          <div>课程发布时间：{{list.courseStartTime}}</div>
          <div>最近点播人数：{{playTimes}}</div>
          <div>好评率：{{praiseRate*100}}% </div>
        </div>
        <ul class="ratings">
          <li>
            <span class="name">评分</span>
            <Rate disabled
                  show-text
                  allow-half
                  v-model="score">
              <span style="color: #f5a623">{{ score*2 }}</span>
            </Rate>
          </li>
          <li>
            <Tag :checked="item.checked"
                 v-for="(item,index) in contentListChecked"
                 :key="index"
                 color="primary">{{item.content}}{{item.scoreItemNum?'('+item.scoreItemNum+')':''}}</Tag>
          </li>
          <!-- <li>
            <span class="name">教学内容丰富有效</span>
            <Rate disabled
                  show-text
                  allow-half
                  v-model="2.5">
              <span style="color: #f5a623">{{ 2.5 }}</span>
            </Rate>
          </li>
          <li>
            <span class="name">老师教学认真，课堂效率高</span>
            <Rate disabled
                  show-text
                  allow-half
                  v-model="2.5">
              <span style="color: #f5a623">{{ 2.5 }}</span>
            </Rate>
          </li> -->
        </ul>
      </div>
    </div>
    <div class="desc">
      <Tabs value="name1"
            @on-click="tabClick">
        <TabPane label="教师介绍"
                 name="name1"
                 class="teacher-introduction">
          <ul class="wrap"
              v-if="currentIndex=='name1'">
            <li class="item"
                v-for="(item,index) in courseDetailInfo">
              <div class="avatar-wrap">
                <img src="../../../assets/img/avatar.png">
              </div>
              <ul class="introduction">
                <li>
                  <span>{{index==0?'主讲：':'助教：'}}</span>
                  <span>{{item.teacherName}}</span>
                </li>
                <li>
                  <span>简介：</span>
                  <span>{{item.introduce}}</span>
                </li>
              </ul>
            </li>
          </ul>
        </TabPane>
        <TabPane label="课前问卷"
                 name="name2"
                 class="pre-class-survey">
          <Row :gutter="20"
               v-if="currentIndex=='name2'"
               style="margin-top: 10px;">
            <i-col :md="24"
                   :lg="24"
                   style="margin-bottom: 20px;">
              <ul class="course-student-ul">
                <li v-for="(item,index) in courseStudentList" :key="index" @click="showAnswerModel(item.questionnaire_id,item.answer_person)">
                  <div class="course-student-name">
                    <img :src="photoUrl+item.photo">
                    <span>{{item.login_name}}</span>
                  </div>
                  <div class="course-questionnair-name">
                    课前问卷名称：{{ item.questionnaire_name}}
                  </div>
                </li>
              </ul>
            </i-col>
          </Row>
        </TabPane>
        <TabPane label="交互过程观点统计"
                 name="name3"
                 class="opinion-statistics">
          <Row :gutter="20"
               v-if="currentIndex=='name3'"
               style="margin-top: 10px;">
            <i-col :md="24"
                   :lg="24"
                   style="margin-bottom: 20px;">
              <Card shadow>
                <chart-pie style="height: 300px;"
                           :value="pieData"
                           text="用户访问来源"></chart-pie>
              </Card>
            </i-col>
          </Row>
        </TabPane>
        <TabPane label="专家点评"
                 name="name4"
                 class="expert-reviews">
          <!-- <div class="rating-detail"
               v-if="currentIndex=='name4'">
            <div class="editor-wrap">
              <div class="header">
                <div class="user">
                  <span class="placeholder"></span>
                  <img src="../../../assets/img/avatar.png">
                  <span>张三</span>
                </div>
                <div class="rate-star">
                  <div class="rate-star-line rate-star-line1">
                    <span>课堂内容充实，简单明了</span>
                    <Rate show-text
                          allow-half
                          v-model="valueCustomText">
                      <span style="color: #f5a623">{{ valueCustomText }}</span>
                    </Rate>
                  </div>
                  <div class="rate-star-line rate-star-line2">
                    <span>教学内容丰富有效</span>
                    <Rate show-text
                          allow-half
                          v-model="valueCustomText">
                      <span style="color: #f5a623">{{ valueCustomText }}</span>
                    </Rate>
                  </div>
                  <div class="rate-star-line rate-star-line3">
                    <span>老师教学认真，课堂效率高</span>
                    <Rate show-text
                          allow-half
                          v-model="valueCustomText">
                      <span style="color: #f5a623">{{ valueCustomText }}</span>
                    </Rate>
                  </div>
                </div>
              </div>
              <editor class="editor"
                      ref="expertEditor" />
              <div class="btn-wrap">
                <div class="rating">
                  <span>评价：</span>
                  <RadioGroup v-model="animal">
                    <Radio label="好评">好评(11)</Radio>
                    <Radio label="中评">中评(22)</Radio>
                    <Radio label="差评">差评(33)</Radio>
                  </RadioGroup>
                </div>
                <Button @click="sendContent"
                        type="primary">发表评论</Button>
              </div>
            </div>

            <ul class="rating-detail-wrap">
              <li class="rating-item"
                  v-for="item in 6">
                <div class="rating-item-root">
                  <div class="avatar">
                    <img src="../../../assets/img/avatar.png">
                    <div class="name">张某某</div>
                  </div>
                  <div class="rating-area">
                    <div class="rating-star">
                      <Rate disabled
                            allow-half
                            v-model="2.5">
                      </Rate>
                    </div>
                    <div class="rating-content">专家点评内容！！！！</div>
                    <div class="rating-time">
                      <span>2018-07-11 12:17:06</span>
                      <span>
                        <Icon type="md-star-outline" />
                        <Icon type="md-create" />
                        <Icon type="ios-trash-outline" />
                      </span>
                    </div>
                  </div>
                </div>
              </li>
            </ul>
          </div> -->
          <discussion v-if="currentIndex=='name4'"
                      :name="'name4'"
                      :commentList="expertCommentList"
                      :scoreContentsList="scoreContentsList"
                      :contentList="contentList"
                      @getList="getList"
                      @replay="replay"
                      :courseId="list.courseId" />
          <!-- <div class="page">
            <Page :total="100" />
          </div> -->

        </TabPane>
        <TabPane label="学员讨论"
                 name="name5"
                 class="student-discussion">
          <discussion v-if="currentIndex=='name5'"
                      :name="'name5'"
                      :commentList="studentCommentList"
                      :scoreContentsList="scoreContentsList"
                      :contentList="contentList"
                      @getList="getList"
                      @replay="replay"
                      :courseId="list.courseId" />
          <!-- <div class="page">
            <Page :total="100" />
          </div> -->
        </TabPane>
      </Tabs>
    </div>
    <notesModal v-if="notesModalVisible"
                ref="notesModal"></notesModal>

    <Modal class="answer-detail-modal" ref="answerModal"
         v-model="answerModelVisible"
         width="600px">
         <p slot="header">答题人：{{answerPerson}}</p>
      <div class="wrap">
        <div class="part part1">
          <div class="title">单选题</div>
          <ul class="desc">
            <li v-if="item.exerciseType==0"
                class="item-title"
                v-for="(item,index) in answerDetail"
                :key="index">
              <div>{{index+1}}.{{item.exerciseName}}</div>
              <div>回答：{{ item.answerContentChoice }}.{{ item.answerContent}}</div>
            </li>
          </ul>
        </div>
        
        <div class="part part3">
          <div class="title">主观题</div>
          <ul class="desc">
            <li v-if="item.exerciseType==2"
                class="item-title"
                v-for="(item,index) in answerDetail"
                :key="index">
              <div>{{index+1}}.{{item.exerciseName}}</div>
              <div>回答：{{item.answerContentSubjective}}</div>
            </li>
          </ul>
        </div>
      </div>
    </Modal>
  </div>

</template>
<script>
import { ChartPie } from '_c/charts'
import Editor from '_c/editor'
import { getCourseDetailInfo, saveCommentInfo, deleteCommentInfo, getCourseStudentList } from '@/api/data'
import { getAnswerDetail } from '@/api/management.js'
import TreeMenu from '@/components/tree-menu/TreeMenu.vue'
import notesModal from '@/components/tree-menu/notes-modal'
import { mapState } from 'vuex'
import Discussion from './course-details-components/discussion'
export default {
  data () {
    return {
      pieData: [
        { value: 335, name: '直接访问' },
        { value: 310, name: '邮件营销' },
        { value: 234, name: '联盟广告' },
        { value: 135, name: '视频广告' },
        { value: 1548, name: '搜索引擎' }
      ],
      content: '',
      animal: '好评',
      valueCustomText: 3.8,
      currentIndex: 'name1',
      list: {},
      courseDetailInfo: [],
      studentCommentList: [],
      expertCommentList: [],
      notesModalVisible: false,
      contentList: [],
      courseList: [],
      praiseRate: '',
      playTimes: '',
      score: 0,
      scoreContentsList: [],
      scoreItemNumList: [],
      courseStudentList: [], // 课程下学生列和问卷列表
      photoUrl: process.env.API_ROOT.replace('wisdom-classroom/', '') +'images/photo/',
      answerModelVisible: false, // 问卷答案弹窗
      answerPerson: '', //答卷人
      answerDetail: [], // 问卷答案详情
      // userId: '',
      liveData:{} //直播数据
    }
  },
  computed: {
    ...mapState({
      roleId: state => state.user.roleId,
      userId: state => state.user.userId,
    }),
    contentListChecked () {
      if (this.contentList && this.contentList.length > 0) {
        this.contentList.forEach((item, index) => {
          item.checked = false
        })
        this.contentList.forEach((item, index) => {
          if (this.scoreItemNumList && this.scoreItemNumList.length > 0) {
            this.scoreItemNumList.forEach((it) => {
              if (item.contentId == it.contentId) {
                item.checked = true
                item.scoreItemNum = it.scoreItemNum
              }
            })
          }
        });
      }
      return this.contentList
    },
  },
  mounted () {
    if (this.$route.params.item) {
      this.list = this.$route.params.item
      this.getList()
      eventBus.$on('courseDetails', () => { this.getList() })
      eventBus.$on('deleteCommentInfo', (item) => {
        this.deleteCommentInfo(item)
      })
    } else {
      this.$router.go(-1)
    }
    this.getCourseStudent()
    console.log('userId:'+ this.userId)
  },
  components: {
    ChartPie,
    Editor,
    TreeMenu,
    notesModal,
    Discussion
  },
  created(){
    this.liveData = JSON.parse(sessionStorage.getItem("liveData"))
    // this.userId = this.liveData.userId
  },
  methods: {
    goBack () {
      this.$router.go(-1)
    },
    handleChange (html, text) {

    },
    sendContent () {
      let data = {
        "content": this.$refs.studentEditor.getHtml(),
        "courseId": this.list.courseId,
        "parentId": '',
        "roleId": this.roleId,
        "userId": this.userId
      }
      saveCommentInfo(data).then((res) => {
        if (res.data == true) {
          this.$Message.success('发表评论成功')
          this.getList()
          this.$refs.studentEditor.setHtml('')
        } else {
          this.$Message.error('发表评论失败')
        }
      })
    },
    tabClick (val) {
      this.currentIndex = val
    },
    getList () {
      let data = {
        "courseId": this.list.courseId,
        // "courseName": this.list.courseName,
        "courseType": this.list.courseType,
        "userId": this.userId
        // "orderName": ""
      }
      console.log(data)
      getCourseDetailInfo(data).then((res) => {
        if (res.data) {
          this.scoreContentsList = res.data.scoreContentsList
          this.score = res.data.courseList[0].score / 2
          this.playTimes = res.data.courseList[0].playTimes
          this.praiseRate = res.data.praiseRate
          this.courseList = res.data.courseList
          this.contentList = res.data.contentList
          this.courseDetailInfo = res.data.courseList
          this.studentCommentList = res.data.studentCommentList
          this.expertCommentList = res.data.expertCommentList
          this.scoreItemNumList = res.data.scoreItemNumList
          this.studentCommentList.map((item) => {
            item.photo = process.env.API_ROOT.replace('wisdom-classroom/', '') +
              'images/photo/' + item.photo
          })
          this.expertCommentList.map((item) => {
            item.photo = process.env.API_ROOT.replace('wisdom-classroom/', '') +
              'images/photo/' + item.photo
          })
        }
      })
    },
    // 获取课程下学生列表
    getCourseStudent(){
      let courseId = this.list.courseId
      getCourseStudentList(courseId).then(res => {
        console.log(res)
        if(res.status == 200){
          this.courseStudentList = res.data
        }
      })
    },
    // 显示问卷答案详情
    showAnswerModel(questionnaireId,answerPerson){
      this.answerModelVisible = true
      let params = {
        "questionnaireId": String(questionnaireId),
        "answerPerson": String(answerPerson),
        "courseId": String(this.list.courseId)
      }
      getAnswerDetail(params).then(res => {
        console.log(res)
        if(res.status == 200){
          this.answerDetail = res.data.answersDetailList
          this.answerPerson = res.data.answerPersonName
        }
      })
    },
    replay (item) {
      this.notesModalVisible = true
      this.$nextTick(() => {
        this.$refs.notesModal.init(item)
      })
    },
    deleteCommentInfo (item) {
      this.$Modal.confirm({
        title: '删除评论',
        content: `<p>是否对${item.name}的评论进行删除</p>`,
        onOk: () => {
          deleteCommentInfo(item.discussId).then((res) => {
            if (res.data == true) {
              this.$Message.success('删除成功')
              this.getList()
            } else {
              this.$Message.error('删除失败')
            }
          })
        },
        onCancel: () => {
          this.$Message.info('删除取消');
        }
      });

    }
  },
  beforeDestroy () {
    eventBus.$off('courseDetails')
    eventBus.$off('deleteCommentInfo')
  }
}
</script>
<style lang="scss">
#course-details {
  width: 90%;
  margin: 0 auto;
  padding: 40px 0;
  .introductions {
    display: flex;
    margin-bottom: 40px;
    .video {
      width: 40%;
      height: 260px;
      position: relative;
      border-radius: 10px;
      overflow: hidden;
      video {
        width: 100%;
        height: 100%;
      }
      .mask {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.1);
        font-size: 0;
        img {
          position: absolute;
          left: 50%;
          top: 50%;
          width: 60px;
          transform: translateX(-50%) translateY(-50%);
          transition: all 0.3s;
          cursor: pointer;
          &:hover {
            width: 70px;
          }
        }
      }
    }
    .info {
      position: relative;
      width: 60%;
      padding-left: 50px;
      height: 260px;
      overflow: auto;
      .ivu-btn {
        position: absolute;
        top: 70px;
        right: 0;
      }
      .name {
        font-size: 24px;
        height: 60px;
        line-height: 60px;
        margin-bottom: 10px;
        span {
          vertical-align: middle;
        }
        .ivu-btn {
          vertical-align: middle;
        }
      }
      .detail {
        font-size: 14px;
        margin-bottom: 20px;
        & > div {
          height: 20px;
          line-height: 20px;
          margin-bottom: 5px;
        }
      }
      .ratings {
        li {
          display: flex;
          height: 35px;
          font-size: 0;
          .name {
            height: 100%;
            line-height: 35px;
            font-size: 14px;
            display: inline-block;
            width: 50px;
            padding-right: 20px;
            text-align: right;
          }
        }
      }
    }
  }
  .desc {
    .ivu-tabs-bar {
      border-bottom: none;
      margin-bottom: 30px;
      box-shadow: 0 0 10px #ccc;
    }
    .teacher-introduction {
      .wrap {
        .item {
          display: flex;
          float: left;
          padding: 5px;
          width: calc(100% / 3);
          height: 140px;
          overflow: auto;
          border-bottom: 1px solid #e8eaec;
          .avatar-wrap {
            padding: 0 5px;
            img {
              width: 60px;
              height: 60px;
            }
          }
          .introduction {
            padding: 0 5px;
            font-size: 14px;
          }
        }
      }
    }
    .expert-reviews,
    .student-discussion {
      .rating-detail {
        .editor-wrap {
          .header {
            .user {
              img {
                width: 50px;
                height: 50px;
                vertical-align: middle;
                margin: 0 15px;
                border-radius: 100%;
              }
              span {
                vertical-align: middle;
              }
            }
            .rate-star {
              padding: 0 80px;
              overflow: hidden;
              .rate-star-line {
                & > span {
                  display: inline-block;
                  // width: 50px;
                  text-align: right;
                  height: 30px;
                  line-height: 30px;
                }
              }
              .rate-star-line1 {
                .ivu-btn {
                  float: right;
                }
              }
            }
          }
          .editor {
            padding: 0 80px;
            margin: 30px auto 15px;
          }
          .btn-wrap {
            display: flex;
            justify-content: space-between;
            margin: 0 auto 30px;
            padding: 0 80px;
          }
        }
        .rating-detail-wrap {
          width: 90%;
          margin: 0 auto;
          .rating-item {
            margin-bottom: 8px;
            padding: 24px 32px;
            background: #fff;
            box-shadow: 0 4px 8px 0 rgba(7, 17, 27, 0.1);
            border-radius: 12px;
            .rating-item-root {
              display: flex;
              .avatar {
                width: 50px;
                flex: 0 0 50px;
                text-align: center;
                margin-right: 30px;
                img {
                  width: 50px;
                  height: 50px;
                  border-radius: 100%;
                }
              }
              .rating-area {
                flex: 1;
                .name {
                  color: #787d82;
                  font-size: 12px;
                  text-align: left;
                  line-height: 20px;
                  font-weight: 700;
                }
                .rating-content {
                  line-height: 28px;
                  font-size: 14px;
                  color: #14191e;
                  text-align: left;
                  margin: 8px auto;
                  word-break: break-all;
                }
                .rating-option {
                  display: flex;
                  justify-content: flex-end;
                }
                .rating-time {
                  height: 30px;
                  line-height: 30px;
                  font-size: 0;
                  img {
                    width: 11px;
                    margin-right: 5px;
                  }
                  & > span {
                    color: #b5b9bc;
                    font-size: 12px;
                    line-height: 20px;
                    &:last-of-type {
                      // margin-left: 20px;
                    }
                  }
                  .ivu-icon{
                    font-size: 16px;
                    color: #2d8cf0;
                    cursor: pointer;
                  }
                }
                .replay {
                  flex: 1;
                  &:hover span,
                  i {
                    color: #2d8cf0;
                  }
                }
              }
            }
          }
        }
      }
    }
    .page {
      text-align: center;
      padding-top: 40px;
    }
  }
  .course-student-ul{
    width: 90%;
    margin: 0 auto;
    li{
      display: flex;
      justify-content: space-between;
      padding: 24px 32px;
      margin-bottom: 15px;
      background: #fff;
      border-radius: 12px;
      box-shadow: 0 4px 8px 0 rgba(7, 17, 27, 0.1);
      cursor: pointer;
      &:hover{
        color: #2d8cf0;
      }
      .course-student-name{
        height: 30px;
        line-height: 30px;
        img{
          width: 30px;
          border-radius: 100%;
          margin-right: 30px;
          vertical-align: middle;
        }
        span{
          display: inline-block;
          font-size: 14px;
          vertical-align: middle;
        }
      }
      .course-questionnair-name{
        height: 30px;
        line-height: 30px;
        font-size: 13px;
      }
    }
  }
}
.answer-detail-modal{
  .title{
    font-size: 14px;
    font-weight: 700;
  }
  .desc{
    margin-left: 10px;
    li{
      margin-bottom: 15px;
      div{
        margin-left: 10px;
        &:first-child{
          margin-left: 0;
        }
      }
    }
  }
}
</style>

